const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const tsImportPluginFactory = require("ts-import-plugin");
const {distPath,basePath} = require("./config");
const path = require("path");

/**
 *
 * @param {*} isUsePostcss 启用postcss转语法树
 * @param {*} cssOptions css-loader参数
 * @param {*} preProcessor 额外的预处理器,如:sass-loader
 */
const getStyleLoaders = (isUsePostcss, cssOptions, preProcessor) => {
  const loaders = [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        esModule: true,
      },
    },
    {
      loader: "css-loader",
      options: {
        importLoaders: 1,
        // modules: {
        //   localIdentName: "[path][name]__[local]--[hash:base64:5]",
        // },
        ...(cssOptions ? cssOptions : {}),
      },
    },
  ];
  isUsePostcss &&
    loaders.push({
      loader: "postcss-loader",
      options: {
        plugins: [require("postcss-preset-env")()],
      },
    });
  preProcessor && loaders.push(preProcessor);
  return loaders;
};

/***library只抽取异步代码公共部分，避免配成同步出现入口文件有vendors的依赖关系 ***/
const splitChunks = {
  chunks: "async", //默认作用于异步chunk，值为all/initial/async
  minSize: 30000, //默认值是30kb,代码块的最小尺寸
  minChunks: 1, //被多少模块共享,在分割之前模块的被引用次数
  maxAsyncRequests: 5, //按需加载最大并行请求数量
  maxInitialRequests: 3, //一个入口的最大并行请求数量
  name: true, //打包后的名称，默认是chunk的名字通过分隔符（默认是～）分隔开，如vendor~
  automaticNameDelimiter: "~", //默认webpack将会使用入口名和代码块的名称生成命名,比如 'vendors~main.js'
  cacheGroups: {
    //设置缓存组用来抽取满足不同规则的chunk,下面以生成common为例
    vendors: {
      // name: "common",
      test: /node_modules/, //条件
      priority: -10, ///优先级，一个chunk很可能满足多个缓存组，会被抽取到优先级高的缓存组中,为了能够让自定义缓存组有更高的优先级(默认0),默认缓存组的priority属性为负值.
    },
    commons: {
      minSize: 0, //最小提取字节数
      minChunks: 2, //最少被几个chunk引用
      priority: -20,
      reuseExistingChunk: true, //    如果该chunk中引用了已经被抽取的chunk，直接引用该chunk，不会重复打包代码
    },
  },
};

const getUrlLoader = (isSvg=false,outputPath="")=>{
    let options={
      limit: 8192, //小于8K->base64,       
      outputPath: outputPath,
      publicPath: basePath,
      name: "[path][name].[contenthash:8].[ext]",  
    };
    return   {
      loader: "url-loader", //文件转换为base64 URI
      options: isSvg?{...options,minetype: 'image/svg+xml'}:options,
    };
}

// const tsLoader = {
//   loader: "ts-loader",
//   options: {
//     //设置自定义转换器,TypeScript 可以将 TS 源码编译成 JS 代码，自定义转换器插件则可以让你定制生成的代码。
//     // 比如删掉代码里的注释、改变变量的名字、将类转换为函数等等
//     transpileOnly: true,
//     //ts-import-plugin是为了按需引入antd
//     getCustomTransformers: () => ({
//       before: [
//         tsImportPluginFactory({
//           libraryName: "antd",
//           libraryDirectory: "es",
//           style: "css",
//         }),
//       ],
//     }),
//     // compilerOptions: {
//     //   module: "es2015",
//     // },
//   },
// };

const tsLoader={
  loader:'ts-loader',
  options: {
    transpileOnly: true,
  },
}

module.exports = {
  getStyleLoaders,
  splitChunks,
  getUrlLoader,
  tsLoader,
};
